<style>
  #{{ uid }}_div {
    grid-template-areas:
      {% for areaName, areaParams in view.areas %}
        '{{ areaName }}'
      {% endfor %}
    ;
    {{ view.style }}
  }

  {% if view.layoutSm is iterable %}
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
      #{{ uid }}_div {
        grid-template-areas:
          {% for layoutRow in view.layoutSm %}
            '{{ layoutRow }}'
          {% endfor %}
        !important;
      }
    }
  {% endif %}

  {% if view.layoutMd is iterable %}
    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      #{{ uid }}_div {
        grid-template-areas:
          {% for layoutRow in view.layoutMd %}
            '{{ layoutRow }}'
          {% endfor %}
        !important;
      }
    }
  {% endif %}

  {% if view.layoutLg is iterable %}
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      #{{ uid }}_div {
        grid-template-areas:
          {% for layoutRow in view.layoutLg %}
            '{{ layoutRow }}'
          {% endfor %}
        !important;
      }
    }
  {% endif %}

  {% if view.layoutXl is iterable %}
    /* X-Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      #{{ uid }}_div {
        grid-template-areas:
          {% for layoutRow in view.layoutXl %}
            '{{ layoutRow }}'
          {% endfor %}
        !important;
      }
    }
  {% endif %}

  {% if view.layoutXxl is iterable %}
    /* XX-Large devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {
      #{{ uid }}_div {
        grid-template-areas:
          {% for layoutRow in view.layoutXXl %}
            '{{ layoutRow }}'
          {% endfor %}
        !important;
      }
    }
  {% endif %}


  {% for areaName, areaParams in view.areas %}
    .{{ uid }}-area-{{ areaName }} { grid-area: {{ areaName }}; {{ areaParams.style }} }
  {% endfor %}
</style>

<div
  class='adios ui Grid {{ params.cssClass }}'
  id='{{ uid }}_div'
>
  {{ params.html|raw }}
</div>
